<template>
    <div id="menus">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>菜单设置</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-form ref="form" label-width="80px" :inline="true" size="small">
                <el-form-item>
                    <el-button type="primary" size="small" @click="addRecharge">添加菜单</el-button>
                </el-form-item>
            </el-form>
            <el-row v-for="(item,index) in menusList" :key="index">
                <el-col :span="24">
                    <el-form class="demo-form-inline">
                        <el-form-item :label="item.name" label-width="90px">
                            <el-button type="primary" size="small" plain @click="lookJunior(index,item.id)"
                                       v-if="item.juniorStatus==1">
                                查看下级
                            </el-button>
                            <el-button type="primary" size="small" plain @click="packUp(index,item.id)"
                                       v-if="item.juniorStatus==0">
                                收起下级
                            </el-button>
                            <!--                            <el-button type="warning" size="small" plain>添加</el-button>-->
                            <el-button type="success" size="small" plain @click="edit(item.id)">编辑</el-button>
                            <el-button type="danger" size="small" plain @click="remove(item.id)">删除</el-button>
                        </el-form-item>
                        <el-form-item :label="memu2.name" v-for="(memu2,index) in item.children" :key="index"
                                      label-width="162px">
                            <el-button type="success" size="small" plain @click="edit(memu2.id)">编辑</el-button>
                            <el-button type="danger" size="small" plain @click="remove(memu2.id)">删除</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-card>
        <el-dialog :title="fromTitle" :width="this.$store.state.dialogWidth" :visible.sync="visible">
            <el-row :gutter="20">
                <el-col :span="this.$store.state.elColNum">
                    <el-form ref="form" :label-width="this.$store.state.labelWidth" size="small">
                        <el-form-item label="菜单名称">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item label="父级菜单">
                            <el-select v-model="form.parent_id" placeholder="请选择菜单级别"
                                       :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                                <el-option :label="item.name" :value="item.id" v-for="(item,index) in addMenusList"
                                           :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否显示">
                            <el-select v-model="form.status" placeholder="请选择是否显示"
                                       :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                                <el-option label="是" :value="1"></el-option>
                                <el-option label="否" :value="0"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="菜单类型">
                            <el-select v-model="form.type" placeholder="请选择是否显示"
                                       :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                                <el-option label="只作为菜单" :value="0"></el-option>
                                <el-option label="有界面可访问菜单" :value="1"></el-option>
                                <el-option label="无界面可访问菜单" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="菜单排序">
                            <el-input v-model="form.list_order"></el-input>
                        </el-form-item>
                        <el-form-item label="菜单控制">
                            <el-input v-model="form.controller"></el-input>
                        </el-form-item>
                        <el-form-item label="额外参数">
                            <el-input v-model="form.param"></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="form.remark"></el-input>
                        </el-form-item>
                        <el-form-item label="菜单地址">
                            <el-input v-model="form.action"></el-input>
                        </el-form-item>
                        <el-form-item label="菜单图标">
                            <div style="display: flex;align-items: center">
                                <span :class="form.icon" style="font-size: 30px;margin-right: 10px"></span>
                                <el-button @click="drawer=true" size="small">选择</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible=false" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogAffirm" size="small">确 定</el-button></span>
        </el-dialog>
        <el-drawer
                title="我是标题"
                :visible.sync="drawer"
                :size="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'70%':'30%'"
                class="drawer__body"
                :with-header="false">
            <div class="icon-box">
                <span :class="'icon-span '+item" v-for="(item,index) in iconData" :key="index"
                      @click="chooseIcon(item)"></span>
            </div>
        </el-drawer>
    </div>
</template>

<script>
  import {isRealNum} from '../../utils/common'

  export default {
    name: "menus",
    data() {
      return {
        windowWidth: document.documentElement.clientWidth,  //实时屏幕宽度
        menusList: [],
        fromTitle: '新增',
        visible: false,
        form: {
          name: '',
          action: '',
          icon: '',
          parent_id: '',
          parent_text: '',
          status: '',
          type: '',
          list_order: '',
          controller: "",
          param: '',
          remark: '',
        },
        addMenusList: [],
        id: '',
        drawer: false,
        iconData: [
          'el-icon-s-management',
          'el-icon-s-marketing',
          'el-icon-s-platform',
          'el-icon-s-tools',
          'el-icon-edit',
          'el-icon-user-solid',
          'el-icon-user',
          'el-icon-bell',
          'el-icon-phone',
          'el-icon-s-goods',
          'el-icon-star-off',
          'el-icon-star-on',
          'el-icon-goods',
          'el-icon-warning',
          'el-icon-s-help',
          'el-icon-upload',
          'el-icon-camera',
          'el-icon-video-camera-solid',
          'el-icon-video-camera',
          'el-icon-s-cooperation',
          'el-icon-s-order',
          'el-icon-s-home',
          'el-icon-s-release',
          'el-icon-s-marketing',
          'el-icon-s-opportunity',
          'el-icon-share',
          'el-icon-mobile',
          'el-icon-scissors',
          'el-icon-s-data',
          'el-icon-s-check',
          'el-icon-s-ticket',
          'el-icon-school',
          'el-icon-menu',
          'el-icon-tickets'
        ]
      }
    },
    created() {
      this.getList()
    },
    methods: {
      addRecharge() {
        this.fromTitle = '新增';
        this.id = '';
        this.addMenusList = [];
        this.form = {
          name: '',
          action: '',
          icon: '',
          parent_id: '',
          parent_text: '',
          status: '',
          type: '',
          list_order: '',
          controller: "",
          param: '',
          remark: '',
        };
        this.form.parent_id = 0;
        let newArr = [{name: '顶级菜单', id: 0}];
        this.addMenusList = newArr.concat(this.menusList);

        this.visible = true;
      },
      edit(id) {
        this.id = id;
        this.fromTitle = '编辑';
        this.addMenusList = [];
        let newArr = [{name: '顶级菜单', id: 0}];
        this.addMenusList = newArr.concat(this.menusList);
        console.log(this.addMenusList);
        this.$axios.get('admin/menu/' + id, {}).then((res) => {
          let data = res.data;
          // data.select_category.map((num) => {
          //   num.id = num.id.toString();
          // });
          // for (let key in data.data) {
          //   if (isRealNum(data.data[key])) {
          //     data.data[key] = data.data[key].toString()
          //   }
          // }
          this.form = data.data;
          this.visible = true;
        });
      },
      getList() {
        this.$axios.post('admin/menu/index', {parent_id: 0}).then((res) => {
          let data = res.data;
          data.map((num) => {
            num.children = [];
            num.juniorStatus = 1;
          });
          this.menusList = data;
        });
      },
      // 查看下级
      lookJunior(index, id) {
        this.$axios.post('admin/menu/index', {parent_id: id}).then((res) => {
          let data = res.data;
          if (data.length > 0) {
            this.menusList[index].children = data;
            this.menusList[index].juniorStatus = 0;
          } else {
            this.$message.success('暂无下级')
          }
        });

      },
      // 收起下级
      packUp(index) {
        this.menusList[index].children = [];
        this.menusList[index].juniorStatus = 1
      },
      dialogAffirm() {
        if (this.id) {
          //编辑
          this.$axios.put('admin/menu/' + this.id, this.form).then((res) => {
            this.$message.success('成功');
            this.getList();
            this.visible = false;
          });
        } else {
          // 添加
          this.$axios.post('admin/menu', this.form).then((res) => {
            this.$message.success('成功');
            this.getList();
            this.visible = false;
          });
        }

      },
      remove(id) {
        this.$confirm('确定要进行操作, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.del('admin/menu/' + id, '').then((res) => {
            this.$message.success('删除成功!');
            this.getList();
          });
        }).catch(() => {

        });
      },
      chooseIcon(item) {
        this.form.icon = item;
        this.drawer = false;
      }
    }
  }
</script>

<style scoped>
    .grid-content {
        height: 50px;
        line-height: 50px;
    }

    .icon-box {
        display: flex;
        padding: 20px;
        flex-wrap: wrap
    }

    .icon-box .icon-span {
        font-size: 40px;
        padding: 10px 10px;
        cursor: pointer;
    }
</style>